// eslint-disable-next-line
console.log('loading index.js')

/**
 * 不是懒加载的方法。
 */
// import { mul } from './test'
// console.log(mul)
// document.getElementById('btn').onclick = function () {
//   console.log(mul(4, 5))
// }

/**
 * 点击按钮才会加载 test.js 文件。
 * 不会重复加载，第二次会读取第一次的缓存。
 */
document.getElementById('btn').onclick = function () {
  /**
   * 1、注意这里的名字签名的注释，能够影响打包的时候chunk的名字。
   *
   * 2、webpackPrefetch : true 这是 “预加载”。会在使用前加载js文件。
   * 等其它资源加载完毕，再加载。
   * 这个是最好用的，可是兼容性不好，慎用。
   * pc端的高级浏览器中可以使用，但是ie和移动端就不太好。
   *
   * 3、“懒加载”，使用的时候才加载。
   * 如果文件比较大，加载时间就变长。
   * 一般都用这个。
   *
   * 总结：
   * 正常加载可以认为是并行加载（同一时间加载多个 文件）
   */
  import(/* webpackChunkName: 'test', webpackPrefetch: true */ './test').then(
    ({ mul }) => {
      console.log(mul(4, 5))
    }
  )
}
